<template>
  <div class="filters">
    <span class="filter" v-for="(item) in filter" :key="item.value" :class="{ active: item.value === selected }"
      @click="$emit('change-filter', item)">
      {{ item.label }}</span>
  </div>
</template>

<script>
export default {
  name: "TodoFilter",
  props: ['selected'],

  setup() {

    const filter = [
      {
        label: "全部",
        value: "all",
      },
      {
        label: "已经完成",
        value: "done",
      },

      {
        label: "未来完成",
        value: "todo",
      },
    ];

    return {
      filter,
    };
  },
};
</script>

<style>
.filters {
  display: flex;
  margin: 24px 2px;
  color: #c0c2ce;
  font-size: 16px;
}

.filters .filter {
  margin-right: 14px;
  transition: 0.8s;
}

.filters .filter.active {
  color: #6b729c;
  transform: scale(1.2);
}
</style>
